<template>
	<z-paging ref="paging" v-model="dataList" @query="queryList" :empty-view-center="false" :hide-no-more-by-limit="10" :auto="false">
		<template v-slot:top></template>
		<view class="box">
			{{ dataList }}
		</view>
	</z-paging>
</template>

<script setup>
import { ref, reactive, onMounted, watch } from 'vue';
import { onLoad, onUnload, onShow, onHide, onReady } from '@dcloudio/uni-app';
import { navTo, setLoadingToast, setToast } from '@/common/utils';

const paging = ref(null);
const firstLoaded = ref(false);
const dataList = ref([]);
const search = ref('');

const Props = defineProps({
	item: Object,
	currentIndex: Number,
	tabIndex: Number
});

watch(
	() => Props.currentIndex,
	(newVal) => {
		if (newVal === Props.tabIndex) {
			//懒加载，当滑动到当前的item时，才去加载
			if (!firstLoaded.value || !dataList.value.length) {
				firstLoaded.value = true;
				setTimeout(() => {
					paging.value.reload();
				}, 100);
			}
		}
	},
	{ immediate: true }
);

// 请求
const queryList = (pageNumber, pageSize) => {
	paging.value.complete([]);
	// getList({ pageNumber, pageSize }).then((res) => {
	// 	paging.value.complete([]);
	// });
};
</script>

<style scoped lang="scss">
.conLines {
	border-bottom: 6rpx solid #f8f8f8;
}

.searchBox {
	padding: 10rpx;
	// border: 1rpx solid red;
}

.container {
	padding: 20rpx 30rpx;

	.shopType {
		font-size: 28rpx;
		display: flex;
		align-items: center;
		padding: 10rpx 0;
		// border: 1rpx solid red;

		.shopName {
			margin-right: 10px;
		}

		.status {
			margin-left: auto;
			color: #51a9ec;
		}

		.circle {
			margin-right: 10rpx;
			font-size: 24rpx;
			display: flex;
			width: 40rpx;
			height: 40rpx;
			background-color: #51a9ec;
			justify-content: center;
			align-items: center;
			border-radius: 50%;
			color: #fff;
		}
	}

	.btns {
		padding: 15rpx 0;
		text-align: right;
		// border: 1rpx solid red;

		& > * {
			margin-left: 15rpx;
		}
	}

	.con {
		display: flex;
		flex-direction: column;
		// border: 1rpx solid red;
		// background-color: #fff;

		.conRow {
			display: flex;
		}

		.item {
			flex: 1;
			padding: 10rpx 0;
			// border: 1px solid red;
			display: flex;
			justify-content: space-between;

			.type {
				color: #bdbdbd;
				font-size: 26rpx;
			}

			.unit {
				font-size: 23rpx;
			}

			.rightBox {
				display: flex;
				align-items: center;

				.text {
					font-weight: 500;
					font-size: 26rpx;
					width: 500rpx;
					text-align: right;
				}

				.img {
					width: 35rpx;
					height: 35rpx;
					margin-left: 10rpx;
				}
			}
		}
	}
}

.notify {
	background: #ffffb3;
	color: #000;

	.type {
		color: #606060 !important;
	}
}
</style>
